<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//cdn.staticfile.org/layui/2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        body {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="system-info">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form">
                <blockquote class="layui-elem-quote">系统配置</blockquote>
                <div class="layui-form-item">
                    <label class="layui-form-label">网站标题:</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" placeholder="请输入网站标题" class="layui-input"
                               lay-verify="required"
                               lay-reqtext="网站标题不能为空">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">网站副标题:</label>
                    <div class="layui-input-block">
                        <input type="text" name="subtitle" placeholder="请输入网站副标题" class="layui-input"
                               lay-verify="required"
                               lay-reqtext="网站副标题不能为空">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关键字:</label>
                    <div class="layui-input-block">
                        <input type="text" name="keywords" placeholder="请输入keywords" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">网站描述:</label>
                    <div class="layui-input-block">
                        <textarea name="description" placeholder="请输入description" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">首页底部代码:</label>
                    <div class="layui-input-block">
                        <textarea name="foot_code" placeholder="请输入首页底部代码，用于展示备案号等" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">全局顶部代码:</label>
                    <div class="layui-input-block">
                        <textarea name="head_banner" placeholder="位于首页与工具页顶部，用于显示广告" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">全局底部代码:</label>
                    <div class="layui-input-block">
                        <textarea name="foot_banner" placeholder="位于首页与工具页底部，用于显示广告或统计代码" class="layui-textarea"></textarea>
                    </div>
                </div>
                <blockquote class="layui-elem-quote">模板选择</blockquote>
                <div class="layui-form-item">
                    <label class="layui-form-label">模板选择</label>
                    <div class="layui-input-inline">
                        <select name="template" lay-verify="required" id="template">
                        </select>
                    </div>
                </div>
                <blockquote class="layui-elem-quote">登录配置</blockquote>
                <div class="layui-form-item">
                    <label class="layui-form-label">接口地址:</label>
                    <div class="layui-input-block">
                        <input type="text" name="oauth_appurl" placeholder="请输入聚合登录接口地址" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">APPID:</label>
                    <div class="layui-input-block">
                        <input type="text" name="oauth_appid" placeholder="请输入APPID" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">APPKEY:</label>
                    <div class="layui-input-block">
                        <input type="text" name="oauth_appkey" placeholder="请输入APPKEY" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">QQ登录:</label>
                    <div class="layui-input-block">
                        <input type="checkbox" value="1" name="oauth_openqq" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">微信登录:</label>
                    <div class="layui-input-block">
                        <input type="checkbox" value="1" name="oauth_openwx" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                    </div>
                </div>
                <blockquote class="layui-elem-quote">极验滑动验证码配置</blockquote>
                <div class="layui-form-item">
                    <label class="layui-form-label">极验ID:</label>
                    <div class="layui-input-block">
                        <input type="text" name="captcha_id" placeholder="请输入极验ID" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">极验KEY:</label>
                    <div class="layui-input-block">
                        <input type="text" name="captcha_key" placeholder="请输入极验KEY" class="layui-input">
                    </div>
                </div>
                <blockquote class="layui-elem-quote">CDN地址配置
                </blockquote>
                <div class="layui-form-item">
                    <label class="layui-form-label">CDNJS源:</label>
                    <div class="layui-input-block">
                        <input type="text" name="cdn_cdnjs" placeholder="请输入CDNJS源" class="layui-input"
                               lay-verify="required"
                               lay-reqtext="CDNJS源不能为空">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">NPM CDN源:</label>
                    <div class="layui-input-block">
                        <input type="text" name="cdn_npm" placeholder="请输入NPM CDN源" class="layui-input"
                               lay-verify="required"
                               lay-reqtext="NPM CDN源不能为空">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn " lay-submit lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script type="text/html" id="template_tpl">
    {{#for(const item of d){}}
    <option value="{{item}}">{{item}}</option>
    {{# }}}
</script>
<script src="//cdn.staticfile.org/layui/2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/common.js" charset="utf-8"></script>
<script src="../js/api.js" charset="utf-8"></script>
<script>

    const init = () => {
        //layer.load(1)
        httpGet('/admin/system/templates').then(res => {
            const getTpl = document.getElementById('template_tpl').innerHTML,
                view = document.getElementById('template');
            layui.laytpl(getTpl).render(res.data, function (html) {
                console.log(html)
                view.innerHTML = html;
                layui.form.render();
                
                httpGet('/admin/system/all').then(res => {
                    if (res.status === 'ok') {
                        let arr = {};
                        const data = res.data;
                        for (const k in data) {
                            arr[data[k]['key']] = data[k]['value']
                        }
                        arr.oauth_openqq = arr.oauth_openqq == '1';
                        arr.oauth_openwx = arr.oauth_openwx == '1';
                        layui.form.val('system-info', arr)
                    }
                })
            });
        })
    }
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            laytpl = layui.laytpl,
            $ = layui.$;
        init();

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            layer.load(1)
            data.field.oauth_openqq = data.field.oauth_openqq ? 1 : 0;
            data.field.oauth_openwx = data.field.oauth_openwx ? 1 : 0;
            let arr = []
            for (const k in data.field) {
                arr.push({
                    'key': k,
                    'value': data.field[k],
                })
            }
            httpPost('/admin/system/set', arr).then(res => {
                if (res.status === 'ok') {
                    $message.success('保存成功');
                }
            }).finally(() => {
                layer.closeAll('loading')
            })
            return false;
        });

    });
</script>
</body>
</html>